<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实例</title>
</head>
<body>
<div id="app">
    {{message}}
    {{test("test")}}
    <button @click="btnClick">按钮1</button>
    <select>
        <option v-for="city in innerCities" :value="city.id">{{city.name}}</option>
    </select>
</div>
</body>
<script src="../../lib/vue.js"></script>
<script src="../../lib/jquery.js"></script>

<script>
    /***
      * Vue生命周期
     *     4个阶段
     *     create:创建
     *        数据和自定方法....
     *     mount ：挂载
     *        把vue实例和页面模板挂载到一起
     *     update
     *         数据更新时
     *     destroy
     *        vue实例销毁 ： 最后一次的更新状态，数据和页面绑定失效
     *
     *    8个生命周期钩子（方法）
     *      beforeCreate
     *      created
     *
     *      beforeMount
     *      mounted
     *
     *      beforeUpdate
     *      updated
     *
     *      beforeDestroy
     *      destroyed
     *
     * */



    new Vue({
        el:'#app',
        data:{
            message:'hello',
            innerCities:[]

        },
        mounted () {
            /*页面初始化*/
            var _this =this;
            $.ajax({
                url:'data/cities.json',
                method:'get',
                dataType:'json',
                success:function (data) {
                    _this.innerCities=data;
                }
            })
           /* this.innerCities = cities;*/
        },
        methods:{
        /*    btnClick:function()*/
            btnClick () {
               this.test("world");
            },
            test(str){
               return "hi:" + str;
            }
        }
    })

</script>
</html>